<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<div class="row">
 <div class="col-md-7">
  <div class="mb10">
   <samp id="inputImage" class="uploadFaceBtn btn btn-w-m btn-danger btn-rounded btn-outline">
    <i class="fa fa-upload"></i> 上传头像
   </samp>
   <span class="ml20 vam">
       <small class="fs12 c-danger">您上传的头像会自动生成三种尺寸，请注意头像是否清晰</small>
   </span>
  </div>
  <div class="image-crop" id="image-crop">
     <img th:if="!${#strings.isEmpty(userMap['avatar'])}" th:src="${userMap['avatar']}"  width="500px" height="500px"/>
     <img th:if="${#strings.isEmpty(userMap['avatar'])}" th:src="@{{path}/front/web/v3/img/default/uploadDefaultPic.jpg?v={v}(v=${v},path=${staticPath})}" width="100%" height="100%"/>
  </div>
 </div>
 <div class="col-md-5">
  <div class="pl10 ml5 clearfix">
   <h4 class="pt10 mt5"><span class="fs16">头像预览：</span></h4>
   <section class="pull-left mr10">
    <div class="img-preview img-preview-md">
       <img th:if="!${#strings.isEmpty(userMap['avatar'])}" th:src="${userMap['avatar']}" height="200px" width="200px"/>
       <img th:if="${#strings.isEmpty(userMap['avatar'])}" th:src="@{{path}/front/web/v3/img/default/uploadDefaultPic.jpg?v={v}(v=${v},path=${staticPath})}" height="200px" width="200px"/>
    </div>
   </section>
   <span class="fs12 c-ccc">200px<br>*<br>200px</span>
  </div>
  <div class="clearfix pt10">
   <section class="col-sm-6">
    <div class="img-preview img-preview-sm">
       <img th:if="!${#strings.isEmpty(userMap['avatar'])}" th:src="${userMap['avatar']}" height="100px" width="100px"/>
       <img th:if="${#strings.isEmpty(userMap['avatar'])}" th:src="@{{path}/front/web/v3/img/default/uploadDefaultPic.jpg?v={v}(v=${v},path=${staticPath})}" height="100px" width="100px"/>
    </div>
    <span class="fs12 c-ccc">100px*100px</span>
   </section>
   <section class="col-sm-6">
    <div class="img-preview img-preview-xs">
       <img th:if="!${#strings.isEmpty(userMap['avatar'])}" th:src="${userMap['avatar']}" height="50px" width="50px"/>
       <img th:if="${#strings.isEmpty(userMap['avatar'])}" th:src="@{{path}/front/web/v3/img/default/uploadDefaultPic.jpg?v={v}(v=${v},path=${staticPath})}" height="50px" width="50px"/>
    </div>
    <span class="fs12 c-ccc">50px*50px</span>
   </section>
  </div>
  <div class="btn-group mt20 pt10 pl10 ml5">
   <button class="btn btn-white" id="moveImg" type="button" data-toggle="tooltip" data-placement="top" data-original-title="移动"><i class="fa fa-arrows"></i></button>
   <button class="btn btn-white" id="zoomIn" type="button" data-toggle="tooltip" data-placement="top" data-original-title="放大"><i class="fa fa-search-plus"></i></button>
   <button class="btn btn-white" id="zoomOut" type="button" data-toggle="tooltip" data-placement="top" data-original-title="缩小"><i class="fa fa-search-minus"></i></button>
   <button class="btn btn-white" id="rotateLeft" type="button" data-toggle="tooltip" data-placement="top" data-original-title="左旋转"><i class="fa fa-rotate-left"></i></button>
   <button class="btn btn-white" id="rotateRight" type="button" data-toggle="tooltip" data-placement="top" data-original-title="右旋转"><i class="fa fa-rotate-right"></i></button>
   <button class="btn btn-white" id="Reset" type="button" data-toggle="tooltip" data-placement="top" data-original-title="重置"><i class="fa fa-refresh"></i></button>
  </div>
 </div>
</div>
<div class="pt10 text-center update-upload-img-but">
 <hr>
 <button class="btn btn-lg btn-info btn-rounded fs14 mb10"   disabled="disabled" id="setDrag" type="button"> 确定裁剪并上传</button>
</div>